<template>
  <div class="portaLogin-phone-page">
    <div class="image-buy">
      <img
        src="http://yn-oa.oss-cn-shanghai.aliyuncs.com/static/static/zw/img/4.png"
        class="content-image"
      />
    </div>
    <div class="content">
      <div class="form-item">
        <div class="iconBox">
          <img
            src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_name.png"
            class="icon-name"
          />
        </div>
        <input
          type="text"
          name=""
          class="input-control"
          placeholder="请输入手机号"
          id="mobilePhone"
          v-model="phone"
        />
      </div>
      <div class="line"></div>
      <div class="form-item">
        <div class="iconBox">
          <img
            src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_password.png"
            class="icon-name"
          />
        </div>
        <input
          type="text"
          name=""
          v-on:input="
            if (verificationCode.length > 5)
              verificationCode = verificationCode.slice(0, 6);
          "
          class="input-control verify"
          placeholder="请输入验证码"
          v-model="verificationCode"
        />
        <span
          class="verifyBtn"
          @click="sendVerifyCode()"
          v-show="!isSendingCode"
          >获取验证码</span
        >
        <span class="verifyBtn disabled" v-show="isSendingCode"
          >重新发送{{ second }}s</span
        >
      </div>
    </div>
    <div class="footer" id="loginBtn" @click="submit">
      <img
        src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_login.png"
        class="login-image"
      />
    </div>
  </div>
</template>
<script>
import { wxshare } from "common/mixin";
import { mapActions } from "vuex";
import { Toast } from "mint-ui";
import { checkPhone, checkpw } from "common/utils";

export default {
  mixins: [wxshare],
  data() {
    return {
      phone: "",
      verificationCode: "",
      second: 60,
      isSendingCode: false,
    };
  },

  methods: {
    ...mapActions({
      // channelLogin: 'ChannelLogin',
      channelLoginNew: "channelLoginNew",
      getInfo: "GetInfo",
      GetVerifyCode: "GetVerifyCode",
    }),
    submit() {
      if (!checkPhone(this.phone)) {
        Toast("请先填写正确的手机号！");
        return false;
      }
      if (this.verificationCode.length !== 6) {
        Toast("请输入6位验证码");
        return false;
      }
      this.channelLoginNew({
        phone: this.phone,
        verificationCode: this.verificationCode,
      })
        .then((result) => {
          this.getInfo().then((data) => {
            // this.$router.push("/channel/home");
            this.$router.push({ path: "/info" });
          });
        })
        .catch((msg) => {
          Toast(msg);
        });
    },
    sendVerifyCode: function () {
      if (!this.phone) {
        Toast("请先填写手机号！");
        return false;
      }
      if (!checkPhone(this.phone)) {
        Toast("请先填写正确的手机号！");
        return false;
      }
      console.log("options", this.phone);
      this.isSendingCode = true;
      let interval = setInterval(() => {
        this.second -= 1;
        if (this.second == 0) {
          this.isSendingCode = false;
          this.second = 60;
          clearInterval(interval);
          // test
        }
      }, 1000);
      let options = {
        phone: this.phone,
      };
      this.GetVerifyCode(options)
        .then((result) => {})
        .catch(() => {
          this.isSendingCode = false;
        });
    },
  },
};
</script>
<style lang="less">
.portaLogin-phone-page {
  .form-item {
    height: 3.05rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; // padding: 0 1.3rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .iconBox {
      width: 3.5rem;
      text-align: center;
      img {
        height: 1.2rem;
        max-width: 1.2rem;
        width: auto; // margin-right: 1.45rem;
      }
    }
    .input-control {
      width: 100%;
      height: 100%;
      outline: none;
      color: #9b9b9b;
      font-size: 0.9rem;
    }
    .input-control.verify {
      width: 50%;
    }
    .verifyBtn {
      display: inline-block;
      width: 50%;
      text-align: center;
      height: 100%;
      line-height: 3.05rem;
      font-size: 16px;
      color: #fe8106;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
    .verifyBtn.disabled {
      color: #9b9b9b;
    }
  }

  .background-image {
    width: 100%;
    height: 4rem;
  }

  .image-buy {
    width: 100%;
  }

  .content-image {
    width: 100%;
  }

  .content {
    width: 100%;
    height: 6.1rem;
    background: #ffffff;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
    margin-top: 0.75rem;
    margin-left: auto;
    margin-right: auto;
  }

  .form-item {
    width: 100%;
    height: 3rem;
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .iconBox {
    width: 4rem;
    text-align: center;
  }

  .icon-name {
    width: 0.8rem;
    height: 0.8rem;
  }

  .input-control {
    width: 100%;
    height: 90%;
    padding-left: 0.8rem;
    outline: none;
    color: #d2d1d3;
    font-size: 0.9rem;
    font-family: PingFangSC;
  }

  .line {
    height: 1px;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
  }

  .footer {
    margin-top: 3rem;
    text-align: center;
  }

  .login-image {
    width: 15rem;
    height: 3.75rem;
  }
  .reg {
    width: 80%;
    margin: 20px auto;
    text-align: right;
  }

  .reg_content {
    color: #009cde;
    font-size: 0.8rem;
    font-family: "微软雅黑";
  }
}
</style>
